<template>
<div id="views">
  <section class="sec1">
    <div class="choseCard hoverhand" @click="windowShowReverse()">
      <span class="title">选择您的证件类型</span>
      <span class="arrowright"></span>
      <span class="cardName">{{cardName}}</span>
    </div>
    <div class="div_name">
      <p class="title">姓名</p>
      <p class="inputName">
        <input v-model="name" type="text" placeholder="请输入您的姓名(简体中文)，认证后不能修改" class="width100" :disabled="disabled">
      </p>
    </div>
    <div class="div_name">
      <p class="title">证件号</p>
      <p class="inputName">
        <input v-model="card" type="text" placeholder="请输入证件号码，认证后不能修改" class="width100" :disabled="disabled">
      </p>
    </div>
  </section>
  <button :class="btnClass" class="yellowbtn" id="nextStep" @click="nextStep">提交</button>
  <div class="cover" v-if="windowshow"  @click="windowShowReverse()"></div>
  <transition name="slide">
    <div class="cardType" v-if="windowshow">
      <p class="setting">
        <button class="cancel" @click="windowShowReverse()">取消</button>
        <button class="confirm" @click="confirmSelect();windowShowReverse()">确定</button>
      </p>
      <div class="cards">
        <p class="hoverhand" :class="cardType == 0||cardType == '' ? 'selected':''"
           @click="selectCard(0);windowShowReverse()">身份证</p>
<!--        <p class="hoverhand" :class="cardType == 1 ? 'selected':''" @click="selectCard(1);windowShowReverse()">台胞证</p>-->
      </div>
    </div>
  </transition>
</div>
</template>
<script>
  import {rechargeVerify} from '../../http/api';
  export default {
    name: 'china_verification',
    data() {
      return {
        introduce: '国内用户-实名校验信息',
        clickCardType: 0,/*弹窗点击的证件*/
        cardType: 0,/*确认的证件*/
        windowshow: false,/*显示选择证件弹窗*/
        cardName: '身份证',/*证件类型（身份证/）*/
        name: '',//姓名
        card:'',//证件号
        disabled : false,//已经充值校验，则使用充值校验的姓名/身份证 禁用输入
        btnClass : 'submitNot',//按钮背景样式，判断是否允许点击
      }
    },
    mounted() {
      let query = this.$route.query;
      if( query.userName ){
        this.name = query.userName;
      }
      if( query.userName ){
        this.card = query.userIdCard;
        this.disabled = true;
      }
    },
    computed : {
      listenChange () {
        return { name:this.name , card:this.card };
      }
    },
    watch:{
      'listenChange'( val ){
        this.inputchange();
      }
    },
    methods: {
      inputchange(){
        this.btnClass = this.name && this.card  ? 'submit' : 'submitNot';
      },
      windowShowReverse() {
        this.windowshow = !this.windowshow
      },
      selectCard(val) {
        this.clickCardType = val;
        this.cardType = this.clickCardType;
        this.cardName = val == 0 ? '身份证' : '';
      },
      confirmSelect() {
        this.cardType = this.clickCardType;
        this.cardName = this.cardType == 0 ? '身份证' : '';
      },
      nextStep() {
        /*提交*/
        if( this.btnClass === 'submit'){
          let toast = require('../../common/js/toast').toast;
          if( !this.name || !this.card){
            let info = !this.name ? '请输入姓名' : '请输入证件号';
            toast(info);
          }else {
            let thiz = this;
            let isRechargeVerify = this.$route.query.rechargeVerify || false;
            if( isRechargeVerify == true || isRechargeVerify == 'true'){
              //充值校验
              rechargeVerify({name:thiz.name , id_card:thiz.card}).then(res => {
                if( res.code == 200 ){
                  toast('充值校验成功');
                  this.$router.go(-2);
                }
              })
            }else{
              //实名认证
              let query = {name : this.name , card : this.card};
              this.$router.push({path: '/upload_idcard' ,query : query})
            }
          }
        }
      }
    }
  }
</script>
<style lang="less" type="text/less" scoped>
  #views{padding:0 0.3rem;padding-bottom: 0.5rem;text-align: left;padding-top: .4rem}
  .sec1{
    background:#fff;margin-top: 0rem;padding:0.25rem;padding-top: 0;border-radius: 0.04rem;
    .title{font-size: 0.32rem;font-family: 'PingFang-SC-Bold';}
    >div{border-bottom: 0.01rem solid#e5e5e5;padding-bottom: 0.01rem;}
    .choseCard{
      padding:0.3rem 0rem;font-size: 0.32rem;overflow: hidden;position: relative;
      .title{float: left;}
      .cardName{float: right;padding-right: 0.45rem;font-size: 0.32rem}
      .arrowright{
        display: inline-block;width: 0.16rem;height: 0.26rem;background: url("../../common/imgs/arrowright.png") center center no-repeat;background-size: 100% 100%;
        float: right;position: absolute;right: 0rem;top:50%;margin-top: -0.13rem;
      }
    }
    .div_name{
      >.title{padding-top: 0.36rem;padding-bottom: 0.14rem;}
      input{height: 0.74rem;}
    }
}
  .submitNot{background: #EFEFEF}
  #nextStep{margin-top: 0.48rem;line-height: 0.88rem;}
  .cards{
    p{
      font-size: 0.32rem;color: #cdcfd1;padding:0.35rem 0;;text-align: center;
    }
    .selected{
      color: #262626;background: #f3f3f3;font-family: 'PingFang-SC-Bold';
    }
  }
  .cardType{
    z-index:6;left:0;position: fixed;bottom: 0;width: 100%;border-top-left-radius: 0.4rem;border-top-right-radius: 0.4rem;background: #fff;overflow: hidden;
    .setting{
      overflow: hidden;
      button{padding:0.35rem;padding-bottom: 0.45rem}
      .cancel{
        background: none;color: #898989;float: left;font-size: 0.32rem;
      }
      .confirm{
        background: none;color: #FFD203;float: right;font-size: 0.32rem;
      }
    }
  }
  @media screen and (min-width: 1025px){
    .cardType{width: 600px;left: 50%;margin-left: -300px;}
  }

  /*覆盖动画*/
  .slide-enter-active {
    animation-name: slideInUp;
    animation-duration: 0.2s;
    animation-fill-mode: both;
  }
  .slide-leave-active {
    animation-name: slideOutDown;
    animation-duration: 0.2s;
    animation-fill-mode: both;
  }
  @keyframes slideInUp {
    0% {
      transform: translate3d(0, 100%, 0);
      visibility: visible;
    }

    to {
      transform: translateZ(0);
    }
  }
  @keyframes slideOutDown {
    0% {
      transform: translateZ(0);
    }

    to {
      visibility: hidden;
      transform: translate3d(0, 100%, 0);
    }
  }
  .delay-leave-active {
    -webkit-animation-delay: 0.2s;
    -moz-animation-delay: 0.2s;
    -o-animation-delay: 0.2s;
    animation-delay: 0.2s;
  }
  .cardType{
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
  }
</style>
